<template>
	<view class="swiper" @touchmove="swiperMove" @touchend="swiperUp" @touchstart="swiperDown">
		<view v-for="(item, index) in swiperList" :key="index"
			:class="'swiper-item'"
			:style="{
				position: 'absolute',
				transform: 'translate(' + (percentX + percentList[index]) + '%, 0px) translateZ(0px)',
				transitionDuration: (swiperAnimation ? defaultDuration : 0) + 's'
			}">
			<slot :row="item" :index="index" ></slot>
		</view>
	</view>
</template>

<script>
//	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
let systemInfo = uni.getSystemInfoSync();
let windowWidth = systemInfo.windowWidth;
let windowHeight = systemInfo.windowHeight;
let x = 0;
let y = 0;
let animateTimeout = 0;
export default {
	props:{
		data:{
			type:Array
		},
		title:{
			type:String
		}
	},
	data() {
		return {
			downState: false,
			swiperAnimation: true,
			defaultDuration: 0.2,
			percentX: 0,
			percentY: 0,
			percentList: [-100, 0, 100],
			swiperList:[
				{title:'000',bgcolor:'#0ff',},
				{title:'111',bgcolor:'#ff0',},
				{title:'222',bgcolor:'#f0f',},
			],
			lastTimeStamp:0,
		};
	},
	methods: {
		swiperMove(e) {
			var touche = e.touches[0];
			this.lastTimeStamp = e.timeStamp;
			if (!touche) return; // console.log('move')
			
			var clientX = touche.clientX;
			var clientY = touche.clientY;
			this.percentX = ((clientX - x) * 100) / windowWidth;
			this.percentY = ((clientY - y) * 100) / windowHeight;
			
		},
		swiperDown(e) {
			this.downState = true;
			this.swiperAnimation = false;
			let touche = e.touches[0];
			if (!touche) return;
			x = touche.clientX;
			y = touche.clientY;
			this.pageMovement(e)
		},
		
		swiperUp(e) {
			this.downState = false;
			this.swiperAnimation = true;
			this.pageMovement(e)
		},
		//翻下一页
		pageNext(){
			this.percentX = 100;
			clearTimeout(animateTimeout);
			animateTimeout = setTimeout(()=>{
				this.swiperAnimation = false;
				this.swiperList.unshift(this.swiperList.pop());
				this.percentX = 0;
			},200)
		},
		//翻上一页
		pagePrev(){
			this.percentX = -100;
			clearTimeout(animateTimeout);
			animateTimeout = setTimeout(()=>{
				this.swiperAnimation = false;
				this.swiperList.push(this.swiperList.shift());
				this.percentX = 0;
			},200)
		},
		//不翻页
		pageInit(){
			this.percentX = 0;
		},
		//翻页
		pageMovement(e){
			var absY = Math.abs(this.percentY);
			var absX = Math.abs(this.percentX); // console.log(absX,absY)
			if (absY > 2 && absX < 1) {
				this.pageInit()
				return;
			}
			
			let time = e.timeStamp - this.lastTimeStamp
			console.log(this.percentX/time)
			if(this.percentX >= 40 || time > 0 && this.percentX >= 10){
				this.pageNext()
			}else if(this.percentX <= -40 || time > 0 && this.percentX <= -10){
				this.pagePrev()
			}else{
				this.pageInit()
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.swiper {
	/* direction: ltr; */
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.swiper-item {
	background-color: #007aff;
	transition-timing-function: ease-out;
	/* transition-duration: 0.2s; */
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>
